import * as React from 'react'
import {BrowserRouter, Link, Route, Switch} from 'react-router-dom'
import style from "./style.less";

interface key {
    str : string
}

export default class Put_done extends React.Component<any,key>{
    keyref: React.RefObject<HTMLInputElement>

    constructor(props) {
        super(props);
        this.keyref = React.createRef()
    }

    componentDidMount() {
        // this.setState({
        //     str : localStorage.getItem('key')
        // })
        this.output()
        // this.keyref.current.value = localStorage.getItem('key')
        // this.keyref.current.value = window.location.href
    }


    // componentDidUpdate() {
    //     this.output()
    // }

    output() {
        // let con:HTMLInputElement = document.querySelector('.content')
        // this.setState({
        //     str : localStorage.getItem('key')
        // })
        // this.keyref.current.value = this.props.match.x
        // this.setState({
        //     str:this.props.match.str
        // })
        this.keyref.current.value = localStorage.getItem('key')
        localStorage.removeItem('key')
        //此函数获得发送后得到的id，并打印输出
    }

    render() {
        return (
            <div>
                <header className={style.top}>
                    <div className={style.top_main}>
                        <Link className={style.top_img} to="/">
                            时间胶囊
                        </Link>
                        <div>
                            <Link className={style.top_back} to="/">首页</Link>
                            <Link className={style.top_put} to="/put">添加</Link>
                            <Link className={style.top_open} to="/open">打开</Link>
                        </div>
                    </div>
                </header>
                <main className={style.bottom}>
                    <div className={style.container}>
                        <h1 className={style.page_header}>胶囊添加成功</h1>
                        <div className={style.main}>
                            <form>
                                <label>胶囊Key</label>
                                <input className={style.content} type="text" ref={this.keyref} readOnly={true} style={{width:'220px'}} />
                                    <span style={{padding:'8px'}}>你可以复制 key自己保存，也可以发送给你的好友，让他来打开胶囊。 </span>
                            </form>
                            <br/>
                                <br/>
                                    <h2 style={{display:'none'}}>已经向你的好友 发送了邮件。</h2>
                        </div>
                    </div>
                </main>
            </div>
        )
    }
}